
<!-- 首页 -->
<template>
	<view class="index_block">
		<!-- 第一部分：轮播图 -->
		<view class="swiper_block">
			<view class="top_icon">
				<view class="icon_search" @click="goSearch"></view>
			</view>
			<swiper :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration"
				indicator-color="#fff" indicator-active-color="#4EDDF9" :circular="circular" class="swiper-con">
				<swiper-item v-for="item in swiperArr" :key="item.photoUrl">
					<image :src="item.photoUrl" @click="goItem" :data-id="item.productId"></image>
				</swiper-item>
			</swiper>
		</view>
		<!-- 图标部分 -->
		<view class="icon_list">
			<view>
				<text class="iconfont icon-xiuxiankafeiyule"></text>
				<text>休闲</text>
			</view>
			<view>
				<text class="iconfont icon-zuanshi"></text>
				<text>优质</text>
			</view>
			<view>
				<text class="iconfont icon-mimayaochi"></text>
				<text>解锁</text>
			</view>
			<view>
				<text class="iconfont icon-huiyuanzhuanxiang"></text>
				<text>VIP</text>
			</view>
		</view>
		<!-- 推荐部分 -->
		<view class="content_block">
			<view class="tuijian">
				<text class="iconfont icon-pingjia"></text>
				<text class="iconfont icon-pingjia"></text>
				<text class="iconfont icon-pingjia"></text>
				<text class="iconfont icon-pingjia"></text>
				<text class="iconfont icon-pingjia"></text>
				<text>推荐</text>
				<text class="iconfont icon-pingjia"></text>
				<text class="iconfont icon-pingjia"></text>
				<text class="iconfont icon-pingjia"></text>
				<text class="iconfont icon-pingjia"></text>
				<text class="iconfont icon-pingjia"></text>
			</view>
			<!-- 横向列表部分 -->
			<view style="padding: 20rpx; background: white">
				<scroll-view :scroll-x="true" scroll-with-animation="true" style="width: 100%; background: white">
					<view class="list_block">
						<!-- 列表循环 -->
						<view v-for="(item, index) in tuijianArr" :key="index" class="list" @click="goItem"
							:data-id="item.productId">
							<view style="position: relative">
								<image class="list-img" :src="item.proPicUrl"></image>
							</view>
							<view class="list_right">
								<view class="list_proTitle">
									<text>{{ item.proTitle }}</text>
								</view>
								<view class="list_country">
									<text class="iconfont icon-didian"></text>
									<text>{{ item.country }}</text>
								</view>
								<view class="item_price">
									<view>
										<text class="iconfont icon-shijian"></text>
										<text class="guess_date">{{ item.routingDat }}天{{ item.routingNigth }}晚</text>
									</view>
									<view>
										<text class="iconfont icon-jiaqian"></text>
										<text class="guess_price">{{ item.amount }}元起</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<!-- 热门部分 -->
		<view class="activity_block">
			<view class="activity_title">
				<view class="title">
					<text>热门之旅</text>
				</view>
				<text class="desc">旅途中，邂逅TA，邂逅世界的美</text>
				<view class="activity_pagination">
					<text style="font-size: 52rpx">{{ activityCurrent + 1 }}</text>
					<text> / {{ activityData.length }}</text>
				</view>
			</view>
			<swiper previous-margin="40rpx" next-margin="40rpx" snap-to-edge="true" :interval="interval"
				:autoplay="autoplay" :current="activityCurrent" :duration="duration" :circular="circular"
				@change="currentChange" class="activity_swiper">
				<!-- current 改变时会触发 change 事件 -->
				<swiper-item v-for="(item, index) in activityData" :key="item.product_id" item-id="item.pro_pic_url">
					<view class="item" @click="goItem" :data-id="item.product_id">
						<view class="image">
							<image :src="item.pro_pic_url"></image>
						</view>
						<!-- 判断是否在当前面，若为当前面则隐藏左右图片上的样式 -->
						<view class="border-bottom" :style="{ display: activityCurrent === index ? 'block' : 'none' }">
							<view class="text_desc">
								<text class="title">{{ item.pro_title }}</text>
								<view class="list_country">
									<text class="iconfont icon-didian"></text>
									<text>{{ item.country }}</text>
								</view>
								<view class="zhaomu">
									<text>{{ item.out_time }}</text>
								</view>
							</view>
							<view class="content">
								<view class="day">
									<text class="iconfont icon-shijian"></text>
									<text>
										{{ item.routing_data }}天{{ item.routing_nigth }}晚</text>
								</view>
								<view class="money">
									<text class="iconfont icon-jiaqian"></text>
									<text> {{ item.amount }}元</text>
								</view>
							</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
			<view class="activity_bottom">
				<view v-for="item in activityDesc" :key="item" class="desc">
					<text class="iconfont icon-shenqingchenggonggougouicon"></text>
					<text>{{ item }}</text>
				</view>
			</view>
		</view>
		<!-- 猜你喜欢部分 -->
		<view class="guess_block">
			<view class="tuijian">
				<text>猜你喜欢</text>
				<text class="iconfont icon-xia"></text>
			</view>
			<view class="guess_list">
				<view class="guessList" v-for="item in guessListArr" :key="item.productId" @click="goItem"
					:data-id="item.productId">
					<view>
						<image class="guess_img" :src="item.proPicUrl"> </image>
					</view>
					<view class="guessList_con">
						<view class="proTitle_block">
							<text class="guess_proTitle">{{ item.proTitle }}</text>
						</view>
						<view class="country_block">
							<text class="iconfont icon-didian"></text>
							<text class="guess_country">{{ item.country }}</text>
						</view>
						<view class="msg_block">
							<view>
								<text class="iconfont icon-shijian"></text>
								<text class="guess_date">{{ item.routingDat }}天{{ item.routingNigth }}晚</text>
							</view>
							<view>
								<text class="iconfont icon-jiaqian"></text>
								<text class="guess_price">{{ item.amount }}元起</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	//引入封装好的http
	import http from "@/utils/http.js";

	export default {
		data() {
			return {
				indicatorDots: true, //轮播是否有小圆点
				vertical: false, //false 横向   true 纵向
				autoplay: true, //自动播放
				interval: 2000, //动画时间
				duration: 500, //间隔时间
				circular: true, //衔接动画
				background: ["demo-text-1", "demo-text-2", "demo-text-3"],
				tuijianArr: [], // 定义推荐列表的数组
				swiperArr: [],  // 轮播图数组
				guessListArr: [], //猜你喜欢数组
				activityData: [], // 热门数据的数组
				activityDesc: ["不用懂外语", "不用懂攻略", "没有购物坑", "不用折腾自己"],
				activityCurrent: 0, // 当前的序号
			};
		},
		onLoad: function(option) {
			http
				.request(
					"product/banner/getBySeller/4bc4027c645343f09a964b5c2e9f875b",
					"",
					"get"
				)
				.then((res) => {
					this.swiperArr = res.data;
				});
			// 推荐列表
			http
				.request(
					"product/product/getProductRecommendUser", {
						desc: false,
						orderBy: "top",
						pageNow: 1,
						pageSize: 20,
						seller_user_id: "4bc4027c645343f09a964b5c2e9f875b",
					},
					"post"
				)
				.then((res) => {
					this.tuijianArr = res.data;
				});
			// 猜你喜欢
			http.request("product/product/guessYouLike", "", "get").then((res) => {
				this.guessListArr = res.data;
			});
			// 招募活动轮播图
			http
				.request(
					"requirement/request/getMatchedProducts", {
						desc: false,
						orderBy: "outtime",
						pageSize: 100,
						product_type: 2,
					},
					"post"
				)
				.then((res) => {
					this.activityData = res.data.matchedProducts;
				});
		},
		methods: {
			// 跳转到搜索页
			goSearch() {
				uni.switchTab({
					url: "/pages/search/index",
				});
			},
			// 跳转内容页，传参
			goItem(ev) {
				console.log(ev);
				const id = ev.currentTarget.dataset.id;
				uni.navigateTo({
					url: "/pages/item/item?id=" + id,
				});
			},
			// current 改变时会触发 change 事件
			currentChange(e) {
				this.activityCurrent = e.detail.current;
			},
		},
	};
</script>

<style scoped>
	.top_icon {
		position: fixed;
		top: 120rpx;
		/* #ifndef H5 */
		top: 40rpx;
		/* #endif */
		right: 20rpx;
		width: 80rpx;
		height: 80rpx;
		background-color: #f1efe8;
		border-radius: 50%;
		z-index: 1;
	}

	.icon_search {
		background-position: -124rpx -320rpx;
		display: inline-block;
		background-image: url("http://www.51houniao.com/wx/customer/classic/images/icon_list.png");
		background-repeat: no-repeat;
		width: 65.625rpx;
		height: 65.625rpx;
		background-size: 548.4375rpx;
		vertical-align: middle;
	}

	.swiper-con {
		width: 750rpx;
		height: 372rpx;
	}

	.swiper-con image {
		width: 750rpx;
		height: 372rpx;
	}

	.index_block {
		width: 100%;
		min-height: 100vh;
		background-color: #f2f2f2;
		overflow: hidden;
	}

	.icon_list {
		width: 750rpx;
		height: 130rpx;
		background-color: #fff;
		text-align: center;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	.icon_list .iconfont {
		color: #ffaa00;
		font-size: 60rpx;
	}

	.icon_list view {
		display: flex;
		flex-direction: column;
	}

	.icon_list text {
		font-size: 24rpx;
		color: #ffaa00;
	}

	.content_block {
		width: 100%;
		box-sizing: border-box;
	}

	.list_block {
		width: 100%;
		padding: 16rpx 0rpx 12rpx 0rpx;
		box-sizing: border-box;
		background-color: #fff;
		display: flex;
	}

	.tuijian {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 20rpx;
		height: 100rpx;
		border-bottom: 2rpx solid #d4d4d4;
		background-color: #fff;
	}

	.tuijian text {
		font-size: 32rpx;
		color: #de0000;
		margin-right: 6rpx;
		font-family: "Microsoft Yahei", Tahoma, Arial, sans-serif;
	}

	.tuijian icon-xia {
		font-size: 32rpx;
		color: #858585;
		margin-right: 6rpx;
		font-family: "Microsoft Yahei", Tahoma, Arial, sans-serif;
	}

	.list {
		width: 260rpx;
		/* border-bottom: 1px dashed #b9b9b9; */
	}

	.list view:nth-child(1) {
		margin-right: 20rpx;
	}

	.list_right {
		flex: 1;
	}

	.list_right view {
		margin-bottom: 8rpx;
	}

	.list-img {
		width: 240rpx;
		height: 140rpx;
	}

	.list_proTitle {
		font-size: 28rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.list_country text,
	.list_country .iconfont {
		font-size: 24rpx;
		margin-left: 10rpx;
	}

	.item_price text {
		font-size: 24rpx;
		color: #858585;
	}

	.guess_block {
		width: 750rpx;
		background-color: #fff;
	}

	.guess_list {
		width: 750rpx;
		padding: 20rpx 20rpx;
		background-color: #fff;
		box-sizing: border-box;
	}

	.guessList {
		width: 600rpx;
		height: 150rpx;
		display: flex;
		justify-content: space-between;
		margin: auto;
		border: 2rpx solid #f2f2f2;
		margin-bottom: 40rpx;
		background-color: #fff;
		box-shadow: 10rpx 10rpx 0 #f2f2f2;
	}

	.guess_img {
		width: 260rpx;
		height: 140rpx;
	}

	.guessList_con {
		width: 310rpx;
	}

	.proTitle_block,
	.country_block {
		width: 300rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		border-radius: 8rpx;
	}
	
	.guess_country {
		display: inline-block;
		max-width: 230rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		padding-left: 6rpx;
	}

	.guess_proTitle {
		font-size: 24rpx;
	}

	.country_block,
	.list_country {
		width: max-content;
		background: #e9e9e9;
		border-radius: 4rpx;
		margin-top: 12rpx;
		margin-left: 10rpx;
		border-radius: 8rpx;
		padding: 4rpx 12rpx 4rpx 0;
		box-sizing: border-box;
		line-height: 1;
		color: #484848;
	}

	.country_block text,
	.country_block .iconfont {
		font-size: 24rpx;
		margin-left: 10rpx;
	}

	.msg_block {
		display: flex;
	}

	.msg_block text {
		font-size: 24rpx;
		color: #858585;
		margin-right: 4rpx;
	}

	.msg_block .iconfont,
	.item_price .iconfont {
		font-size: 24rpx;
		color: #858585;
	}

	.activity_block {
		height: 840rpx;
		background-color: #ffffff;
		margin-top: 20rpx;
		padding-top: 30rpx;
		display: flex;
		flex-direction: column;
	}

	.activity_title {
		position: relative;
		padding-left: 60rpx;
	}

	.activity_title .title {
		font-size: 52rpx;
	}

	.activity_title .desc {
		font-size: 28rpx;
		color: #858585;
	}

	.activity_title .activity_pagination {
		position: absolute;
		right: 60rpx;
		top: 0;
	}

	.activity_swiper {
		margin: 20rpx 20rpx 0;
		flex: 1;
	}

	.activity_swiper .item {
		padding: 0 10rpx;
	}

	.activity_swiper .image {
		height: 354rpx;
	}

	.activity_swiper .image image {
		height: 100%;
		width: 100%;
	}

	.activity_swiper .text_desc {
		display: flex;
		align-items: center;
		padding: 10rpx 0;
		position: relative;
	}

	.activity_swiper .text_desc .title {
		font-size: 24rpx;
		margin-top: 10rpx;
	}

	.activity_swiper .text_desc .zhaomu {
		position: absolute;
		right: 0;
		background-image: url("http://www.51houniao.com/wx/customer/classic/images/zhaomu.png?v=78f89dc");
		background-repeat: no-repeat;
		background-size: 100%;
		width: 168rpx;
		height: 64rpx;
		font-size: 24rpx;
		line-height: 64rpx;
		text-align: center;
		color: #33b3b4;
		transform: rotate(-15deg);
	}

	.activity_swiper .content {
		font-size: 24rpx;
		color: #858585;
		margin-bottom: 32rpx;
	}

	.activity_swiper .content .day,
	.activity_swiper .content .money {
		display: inline-block;
	}

	.activity_swiper .content .day {
		margin-right: 40rpx;
	}

	.border-bottom {
		border-bottom: 2rpx solid #858585;
	}

	.activity_bottom {
		background-color: transparent;
		display: flex;
		padding: 66rpx 0 76rpx;
		justify-content: center;
		align-items: center;
	}

	.activity_bottom .desc {
		margin-right: 20rpx;
		font-size: 24rpx;
		color: #858585;
	}

	.activity_bottom .desc:last-child {
		margin-right: 0rpx;
	}
</style>
